<template>
  <div class="high-seas-page">
    <h2 class="page-title">公海</h2>
    <div class="search-container">
      <el-input
        v-model="searchKey"
        placeholder="请输入关键字"
        clearable
        class="input-field"
      >
        <template #append>
          <el-button :icon="Search" @click="fetchHighSeasCustomers" class="search-button" />
        </template>
      </el-input>
    </div>
    <!-- 显示加载状态 -->
    <div v-if="loading" class="loading">
      <i class="el-icon-loading"></i> 加载中...
    </div>
    <!-- 显示错误信息 -->
    <div v-else-if="error" class="error">{{ error }}</div>
    <!-- 显示客户数据 -->
    <div class="card-container" v-else>
      <el-card
      @click="events.detail(client.id)"
        v-for="client in highSeasCustomers"
        :key="client.id"
        class="client-card"
        shadow="hover"
      >
        <div class="client-info">
          <div class="client-name">
            <span class="name-text">{{ client.name }}</span>
          </div>
          <div class="client-contact">
            <span class="phone-icon">📞</span>
            <span class="contact-value">{{ client.phone }}</span>
          </div>
        </div>
        <div class="divider"></div>
        <div class="client-action">
          <el-button
            type="primary"
            class="action-btn"
            @click.stop="handleCustomerRecord(client.id)"
            size="small"
          >
            获取客户
          </el-button>
        </div>
      </el-card>
      <!-- 没有数据时显示提示 -->
      <div v-if="highSeasCustomers.length === 0" class="no-data">暂无公海客户</div>
    </div>
    <!-- 分页组件 -->
    <div class="pagination-container">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :current-page="currentPage"
        :page-size="pageSize"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-drawer
        :destroy-on-close="true"
        v-model="data.isDetailDrawerOpen"
        title="客户详情"
        direction="ttb"
        size="60%"
      >
        <updatedetail @updatedetail="events.updatedetail" :data="data.updateid"></updatedetail>
      </el-drawer>
  </div>
</template>

<script setup lang="ts">
import updatedetail from "@/components/customer/updatedetail.vue";
import { ref, onMounted, reactive } from 'vue';
import { update_Customer, Get_Customers_HighSeas } from '@/api/customer';
import router from '@/router';
import { Search } from '@element-plus/icons-vue';
import type { Customer_Index_Data } from '@/utils/type';
import { ElMessage, ElMessageBox } from 'element-plus';

const data = reactive<Customer_Index_Data>({
  isFirst: true,
  isRecord: false,
  isOpen: false,
  isDetailDrawerOpen: false,
  updateid: "",
  data: [],
  key: "",
  pages: {
    page: 1,
    limit: 12,
    total: 0,
  },
});

const highSeasCustomers = ref([]);
const loading = ref(true);
const error = ref('');
const searchKey = ref('');
const currentPage = ref(1);
const pageSize = ref(12);
const total = ref(0);

// 筛选符合条件的客户
const filterHighSeasCustomers = (customers: any[]) => {
  return customers.filter((client) => {
    return new Date(client.seas_time) < new Date();
  });
};
const events={
  detail(id: string) {
    // console.log(id, "详情");
    sessionStorage.setItem("customer_id", id);
    data.updateid = id;
    data.isDetailDrawerOpen = true;
  },
}

const fetchHighSeasCustomers = async () => {
  try {
    loading.value = true;
    const res = await Get_Customers_HighSeas({
      page: currentPage.value,
      limit: pageSize.value,
      key: searchKey.value
    });
    if (res.code === 0) {
      highSeasCustomers.value = filterHighSeasCustomers(res.data.data);
      total.value = res.data.total;
      error.value = '';
    } else {
      error.value = '获取客户数据失败';
    }
  } catch (err) {
    error.value = '网络错误，请稍后重试';
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  fetchHighSeasCustomers();
});

const handleCardClick = (id: string) => {
  // 这里可以添加卡片点击后的逻辑，比如跳转到详情页
  sessionStorage.setItem('customer_id', id);
  router.push(`/customer/details/${id}`);
};

const handleCustomerRecord = async (id: string) => {
  try {
    await ElMessageBox.confirm(
      '确认要领取该客户吗？此操作不可撤销',
      '操作确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    );
    
    const res = await update_Customer({ id });
    if (res.code === 0) {
      ElMessage.success('客户领取成功');
      fetchHighSeasCustomers();
    }
  } catch (error) {
    // 用户点击取消时会触发 reject，此处不做处理
    if (error !== 'cancel') {
      ElMessage.error('操作失败，请稍后重试');
    }
  }
};

const handleCurrentChange = (page: number) => {
  currentPage.value = page;
  fetchHighSeasCustomers();
};
</script>

<style scoped>
/* 整体页面样式 */
.high-seas-page {
  width: 95%;
  margin: 20px auto;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background-color: #f9f9f9;
}

/* 页面标题样式 */
.page-title {
  font-size: 28px;
  font-weight: 700;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}

/* 搜索框容器样式 */
.search-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

/* 输入框样式 */
.input-field {
  width: 400px;
  border-radius: 8px;
  border: 1px solid #ccc;
  transition: border-color 0.3s ease;
}

.input-field:focus {
  border-color: #409eff;
}

/* 搜索按钮样式 */
.search-button {
  border-radius: 0 8px 8px 0;
  background-color: #409eff;
  color: #fff;
  transition: background-color 0.3s ease;
}

.search-button:hover {
  background-color: #3a8ee6;
}

/* 加载状态样式 */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #666;
  padding: 20px;
}

/* 错误信息样式 */
.error {
  color: #f56c6c;
  font-size: 16px;
  text-align: center;
  padding: 20px;
}

/* 卡片容器样式 */
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  /* 修改这里，去掉 justify-content: center */
}

/* 客户卡片样式 */
.client-card {
  width: calc(33.33% - 20px);
  min-width: 300px;
  box-sizing: border-box;
  border-radius: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.client-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* 客户信息样式 */
.client-info {
  display: flex;
  align-items: center;
  padding: 15px;
}

/* 客户名称样式 */
.client-name {
  flex: 1;
}

.name-text {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

/* 客户联系方式样式 */
.client-contact {
  display: flex;
  align-items: center;
}

.phone-icon {
  margin-right: 5px;
  font-size: 18px;
  color: #999;
}

.contact-value {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

/* 分割线样式 */
.divider {
  border-bottom: 1px solid #e3e3e3;
  margin: 0 15px;
}

/* 客户操作按钮样式 */
.client-action {
  text-align: right;
  padding: 15px;
}

.action-btn {
  background-color: #409eff;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.action-btn:hover {
  background-color: #3a8ee6;
}

/* 无数据提示样式 */
.no-data {
  text-align: center;
  font-size: 16px;
  color: #666;
  padding: 20px;
}

/* 分页组件容器样式 */
.pagination-container {
  display: flex;
  justify-content: center;
  padding-top: 20px;
}
</style>
